<template>
	<el-form ref="ruleFormRef" :model="ruleForm" :rules="rules" label-width="120px" class="demo-ruleForm layout-padding" :size="formSize" status-icon>
		<el-form-item label="上传图片">
			<upload-img v-model:imageUrl="ruleForm.profileReserve">
				<template #empty>
					<span>请上传图片</span>
				</template>
			</upload-img>
		</el-form-item>
		<el-form-item label="公司介绍" prop="companyProfile">
			<el-input v-model="ruleForm.companyProfile" type="textarea" />
		</el-form-item>
		<el-form-item label="公司地址" prop="companyAddress">
			<el-input v-model="ruleForm.companyAddress" />
		</el-form-item>
		<el-form-item label="公司电话" prop="companyPhone">
			<el-input v-model="ruleForm.companyPhone" />
		</el-form-item>
		<el-form-item label="公司邮箱" prop="companyEmail">
			<el-input v-model="ruleForm.companyEmail" />
		</el-form-item>
		<el-form-item>
			<el-button type="primary" @click="submitForm(ruleFormRef)"> 提交 </el-button>
			<el-button @click="resetForm(ruleFormRef)">重置</el-button>
		</el-form-item>
	</el-form>
</template>

<script lang="ts" setup>
import { reactive, ref } from 'vue';
import { fetchList, putObj } from '/@/api/coalSystem/Profile';
import { ElMessage } from 'element-plus';

import type { FormInstance, FormRules } from 'element-plus';
const UploadImg = defineAsyncComponent(() => import('../../../components/Upload/Image.vue'));

const formSize = ref('default');
const ruleFormRef = ref<FormInstance>();
const ruleForm = ref({
	companyAddress: '',
	companyEmail: '',
	companyPhone: '',
	companyProfile: '',
	profileReserve: '',
});

const rules = reactive({
	companyAddress: [{ required: true, message: 'Please input Activity name', trigger: 'blur' }],
	companyEmail: [{ required: true, message: 'Please input activity form', trigger: 'blur' }],
});
onMounted(() => {
	getFetchList();
});
const getFetchList = () => {
	fetchList({})
		.then((res: any) => {
			const { code, msg, data } = res;
			if (code == 0) {
				ruleForm.value = data.records[0];
			} else {
				ElMessage({
					message: msg,
					type: 'warning',
				});
			}
		})
		.finally(() => {
			// loading.value = false;
		});
};
const submitForm = async (formEl) => {
	if (!formEl) return;
	await formEl.validate((valid, fields) => {
		if (valid) {
			putObj({ ...ruleForm.value }).then((res) => {
				const { code, msg } = res;
				if (code == 0) {
					// ruleForm.value = data.records[0];
					ElMessage({
						message: '更新成功',
						type: 'success',
					});
				} else {
					ElMessage({
						message: msg,
						type: 'warning',
					});
				}
			});
		}
	});
};

const resetForm = (formEl: FormInstance | undefined) => {
	if (!formEl) return;
	formEl.resetFields();
};
</script>
